<template>
    <div v-loading = 'loading'>
        <Grid v-if="viewType === 'table'" :rowData="tableViewData.data" :fieldList="tableViewData.fieldList"
            :page="tableViewData.page" />
        <div v-else :unitId="option.unitId"
            :style="'width:' + (width) + 'px;' + 'height:' + (height) + 'px;margin:0 auto'" :id="eChartId"></div>
    </div>
</template>
<script>
import setEchartsOption from '@/views/commonView/js/setEchartsOption'
import Theme from '@/views/commonView/theme/theme.js'
import { UPDATE_COMMON } from '@api/url'
import * as Echarts from 'echarts'

let EchartsSetting = setEchartsOption.setEchartsOption

let themeSeting = Theme.theme
// 测试数据

export default {
    name: 'Draw',
    props: ['option','params'],
    data() {
        return {
            echarts: null,
            tableViewData: {
                data: [],
                fieldList: [],
                page: {}
            },
            viewType: '',
            loading:false,
        }
    },
    created() {
        this.initData()
    },
    methods: {
        initData() {
            let data = this.option;
            let params=this.params;
            let idName = this.eChartId
            if (data) {
                this.$nextTick(() => {
                    let param = {
                        unitId: data.unitId,
                        type: '1',
                        pageNum: 1,
                        pageSize: 15
                    }
                    if(params) param = {...param,...params};
                    this.loading = true;
                    this.$http.post(UPDATE_COMMON, param).then((res) => {
                        const { themes, data, textFields1, numberFields, fields, widgets, page } = res.data.body
                        this.viewType = widgets;
                        if (widgets === 'table') {
                            this.tableViewData = {
                                data: data,
                                fieldList: fields,
                                page: page,
                            }
                            return
                        }
                        const setting = {
                            data: {
                                data,
                            },
                            textFields1,
                            numberFields,
                        }
                        let chart = document.getElementById(idName)
                        let obj = themeSeting.getTheme(themes)
                        if (obj) {
                            Echarts.registerTheme(themes, obj)
                            this.echarts = Echarts.init(chart, themes)
                        } else {
                            this.echarts = Echarts.init(chart)
                        }
                        let opt = EchartsSetting.readData(widgets, setting)
                        this.echarts.setOption(opt)
                    }).finally(() => this.loading = false)
                })
            }
        },
        resize(){
            if(this.echarts){
                setTimeout(() => {
                    this.echarts.resize()
                })
            }
        }
    },
    computed: {
        height() {
            return this.option.length - 40
        },
        width() {
            return this.option.width
        },
        eChartId() {
            return 'chart' + this.option.unitId+'t'+new Date().getTime()
        }
    },
    watch: {
        width(v) {
            this.resize()
        },
        height(v) {
            this.resize()
        }
    }
}
</script>

<style lang="less" scoped></style>
